<template>
  <!-- 上传视频 -->
  <uploader
    ref="fileUploader"
    :options="options"
    class="uploader-example"
    @file-success="onFileSuccess"
    @fileError="onFileError"
    :autoStart="autoStart"
  >
    <uploader-unsupport></uploader-unsupport>
    <div class="inputContainer">
      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-input
            class="input-video-title"
            v-model="videoTitle"
            placeholder="输入视频标题"
            size="normal"
            clearable
          ></el-input>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-select v-model="chanel" placeholder="选择视频分类">
            <el-option
              v-for="item in chanelList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-input
        class="input-video-intro"
        rows="3"
        type="textarea"
        placeholder="作品简介"
        resize="none"
        v-model="videoIntro"
      >
      </el-input>
    </div>
    <p>选择上传的视频吧~</p>
    <uploader-drop ref="uploaderDrop" class="uploader-drop">
      <h1>支持拖拽上传</h1>
    </uploader-drop>
    <uploader-btn :attrs="attrs" :single="true">选择视频文件</uploader-btn>
    <uploader-list></uploader-list>
  </uploader>
</template>

<script>
import { getParentList } from "../api/channelApi";
import { uploadSuccessCallback } from "../api/videoApi";
import qs from "qs";
export default {
  data() {
    return {
      autoStart: false,
      options: {
        target: "http://10.24.17.72:8080/api/video/upload",
        chunkSize: "20480",
        maxChunkRetries: 3, //最大自动失败重试上传次数
        testChunks: false,
        uploadMethod: "POST",
        testMethod: "POST",
        fileParameterName: "file",
        query: {
          nickname: sessionStorage.getItem("name"),
          taskId: sessionStorage.getItem("id"),
        },
      },
      attrs: {
        accept: ".mp4",
      },
      chanelList: null,
      videoTitle: "",
      videoIntro: "",
      chanel: "",
    };
  },
  methods: {
    getChanelList() {
      getParentList()
        .then((res) => {
          this.chanelList = res.data.data;
        })
        .catch((err) => {
          console.log(res);
        });
    },
    onFileSuccess(rootFile, file, response, chunk) {
      uploadSuccessCallback(
        qs.stringify({
          filename: file.name,
          nickname: sessionStorage.getItem("name"),
          videoChannel: this.chanel,
          videoFrom: sessionStorage.getItem("id"),
          videoIntro: this.videoIntro,
          videoTitle: this.videoTitle,
        })
      )
        .then((res) => {
          this.videoTitle = "";
          this.videoIntro = "";
          this.chanel = "";
          this.$refs.fileUploader.fileList = [];
          this.$message({
            message: "上传成功",
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onFileError(rootFile, file, message, chunk) {
      this.$message({
        message: "上传失败，" + message,
        type: "error",
      });
    },
  },
  mounted() {
    console.log(this.$refs.uploaderDrop);
    console.log(this.$refs.fileUploader);
  },
  created() {
    this.getChanelList();
  },
};
</script>

<style lang="scss" scoped>
.uploading {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/navImgs/background05.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.8;
  position: absolute;
}

.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.uploader-example .uploader-btn {
  margin: 10px 4px 10px 0;
}

.uploader-drop {
  height: 200px;
  margin: 10px 0 10px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.input-video-intro {
  margin: 10px 0 10px 0;
}
</style>
